<template>
    <div class="tabBar flex-a flex-b">
        <div class="flex">
            <!-- <div class="tab" @click="jumpTo()">
                <div>
                    <Cart size="16" />
                </div>
                <div>购物车</div>
            </div> -->
            <div class="tab star">
                <div>
                    <StarN v-if="detail.goodStatus == 0" size="16px" @click="collect" />
                    <StarFillN v-if="detail.goodStatus == 1" size="16px" color="#FC5930" @click="resetCollect" />
                </div>
                <div>收藏</div>
            </div>
            <div class="tab">
                <nut-button open-type="contact">
                    <div class="service">
                        <Service size="16" />
                    </div>
                    <div class="service">客服</div>
                </nut-button>
            </div>
        </div>
        <!-- <div class="flex-a"> -->
        <!-- <nut-button shape="square" type="warning" style="border-radius: 50rpx;margin-right: 10rpx;" size="small"
                @click="show('fx')">分销</nut-button> -->
        <div class="btn flex-a" @click="show('buy')">
            <text>折后 ￥{{ totalPrice }} | </text>
            <!-- <text @click="show('buy')">立即购买</text> -->
            <nut-button shape="square" type="info" disabled>立即购买</nut-button>
        </div>
        <!-- </div> -->
        <!-- <nut-button shape="square" type="default" plain @click="show('cart')">加入购物车</nut-button>
        <nut-button shape="square" type="info" @click="show('buy')">立即购买</nut-button> -->
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { useShareAppMessage } from '@tarojs/taro';
import mitt from "./../../../../utils/mitt";
import { reactive, toRefs, onMounted } from 'vue';
import { Cart, Share, Dongdong, Shop, Service, StarN, StarFillN } from '@nutui/icons-vue-taro';
import { ckGoods } from '../../../../api/index'
export default {
    components: {
        Cart,
        Share,
        Dongdong,
        Shop, Service, StarFillN, StarN
    },
    setup() {
        useShareAppMessage((res) => {
            var user = Taro.getStorageSync('user')
            console.log('user.userId' + user.userId)
            if (res.from === 'button') {
                // 来自页面内转发按钮
                //console.log(res.target)
            }
            return {
                title: data.detail.goodsName + '',
                // desc: data.content,
                path: '/packageA/pages/productDetail/index?userId=' + user.userId + '&goodsId=' + data.goodsId,
                imageUrl: data.img
            }
        })
        const data = reactive({
            goodsId: '',
            detail: {},
            cartNum: 0,
            title: '',
            content: '',
            img: '',
            path: '',
            totalPrice: 0,
        });
        onMounted(() => {
            const router = useRouter();
            if (router.params.goodsId) {
                data.goodsId = router.params.goodsId
            }
            mitt.on("detail", (val) => {
                data.detail = val
                data.title = val.goodsName
                data.content = val.goodsIntro
                data.img = val.goodsCoverImg
                data.path = '/packageA/pages/productDetail/index?goodsId=' + val.goodsId
            })
            mitt.on("totalPrice", (val) => {
                data.totalPrice = val
            })
            mitt.on("cartNum", (val) => {
                data.cartNum = val
            })
        });
        const show = (type) => {
            mitt.emit("show", [type, true]);
        }
        const jumpTo = () => {
            Taro.redirectTo({ url: '/pages/cartpage/index' });
        }
        const onCatact = () => {
            Taro.openCustomerServiceChat({
                extInfo: { url: 'https://work.weixin.qq.com/kfid/kfc2e199bb356ead5c6' },
                corpId: 'ww959b513929f92e17',
                success: function (res) { },
                fail: function (res) {
                    console.log(res)
                }
            })
        }
        const collect = () => {
            ckGoods(data.goodsId).then(res => {
                if (res.resultCode == 200) {
                    Taro.showToast({
                        title: '收藏成功',
                        icon: 'success',
                        duration: 2000
                    })
                    data.detail.goodStatus = 1
                }
            })
        }
        const resetCollect = () => {
            ckGoods(data.goodsId).then(res => {
                if (res.resultCode == 200) {
                    Taro.showToast({
                        title: '取消收藏',
                        icon: 'success',
                        duration: 2000
                    })
                    data.detail.goodStatus = 0
                }
            })
        }
        return {
            ...toRefs(data), show, jumpTo, onCatact, collect, resetCollect
        }
    }
};
</script>


<style lang="scss">
.tabBar {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    background: #FAFAFA;
    padding: 20rpx 35rpx 20rpx 35rpx;
    box-sizing: border-box;
    width: 100%;

    // div.star {
    //     top: 30rpx;
    // }

    div.tab {
        position: relative;
        font-size: 26rpx;
        text-align: center;
        color: #000;

        .nut-button--default {
            border-color: transparent !important;
            background: transparent !important;
            padding: 0 0 0 8rpx !important;
            width: 140rpx;
            color: #000;
            font-size: 26rpx;
            overflow: inherit;
            position: relative;
            top: -17rpx;
        }

        // div {
        //     height: 40rpx;
        // }

        .service {
            white-space: nowrap;
            // width: 100rpx;
            height: 36rpx;
        }
    }

    div.btn {
        background: #8DCF00;
        color: #fff;
        width: 350rpx;
        height: 60rpx;
        text-align: center;
        line-height: 60rpx;
        border-radius: 50rpx;
        justify-content: center;

        .nut-button {
            padding: 0 !important;
            background: transparent !important;
            border: none !important;
            width: 120rpx !important;
        }

        .nut-button--disabled {
            opacity: 1 !important;
        }
    }

    .nut-icon-share {
        margin-left: 30rpx;
    }

    .nut-button--plain {
        margin: 0 10rpx 0 30rpx;
    }

    .btn .nut-button {
        width: 200rpx;
        border-radius: 10rpx;
        white-space: nowrap;
    }

    .share {
        width: 90rpx !important;
        padding: 0 !important;
        border: none !important;
        background-color: transparent !important;
        position: relative;
        right: -20rpx;

        text {
            position: relative;
            left: -20rpx;
            top: 12rpx;
        }

        img {
            position: relative;
            left: -20rpx;
            top: 12rpx;
        }
    }

    .share.contact {
        width: 90rpx !important;
        right: -5rpx;
    }
}
</style>